<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ~ Copyright (c) 2019 Contributors to the Eclipse Foundation
  ~
  ~ See the NOTICE file(s) distributed with this work for additional
  ~ information regarding copyright ownership.
  ~
  ~ This program and the accompanying materials are made available under the
  ~ terms of the Eclipse Public License 2.0 which is available at
  ~ http://www.eclipse.org/legal/epl-2.0, or the Apache Software License 2.0
  ~ which is available at https://www.apache.org/licenses/LICENSE-2.0.
  ~
  ~ SPDX-License-Identifier: EPL-2.0 OR Apache-2.0
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->

<div class="loader" *ngIf="loading"></div>

<div id="ProblemDetectionView" *ngIf="!loading && problemFindings">
    <div class="detectionContainer" style="margin-top: 1em; margin-left: 1em; margin-right: 1em"
         *ngIf="problemFindings.length > 0">
        <a style="font-weight: bold">Detected Problems</a>
        <cdk-accordion>
            <cdk-accordion-item
                *ngFor="let problem of problemFindings; let index = index;"
                #accordionItem="cdkAccordionItem"
                class="example-accordion-item"
                role="button"
                tabindex="0"
                [attr.id]="'accordion-header-' + index"
                [attr.aria-expanded]="accordionItem.expanded"
                [attr.aria-controls]="'accordion-body-' + index">
                <div class="example-accordion-item-header" (click)="accordionItem.toggle()">
                    {{problem?.problem}}
                    <span class="example-accordion-item-description">
        Click to {{ accordionItem.expanded ? 'close' : 'open' }}
      </span>
                </div>
                <div class="example-accordion-item-body"
                     role="region"

                     [attr.id]="'accordion-body-' + index"
                     [attr.aria-labelledby]="'accordion-header-' + index">
                    <mat-list>
                        <mat-list-item *ngFor="let finding of problem.findings; last as last"
                                       (mouseover)="onHoverOver(finding)"
                                       (mouseleave)="hoverOut()" (click)="selectFinding(problem, finding)"
                                       [class.selected]="finding === selectedFinding?.occurrence">
                            <span style="white-space:nowrap"
                                  *ngFor="let entry of finding; last as lastentry">{{entry.componentId}}
                                <ng-container *ngIf="!lastentry">,</ng-container></span>
                            <mat-divider [inset]="true" *ngIf="!last"></mat-divider>
                        </mat-list-item>
                    </mat-list>
                </div>
            </cdk-accordion-item>
        </cdk-accordion>
        <div class="row">
            <div class="col-lg-12">
                <div class="btn-group" style="width: 100%; margin-top: 1em;">
                    <button type="button" class="btn btn-sm btn-primary"
                            style="margin-left: 1em; margin-bottom: 1em; margin-right: 1em"
                            [disabled]="!selectedFinding" (click)="solve()">Solve
                    </button>
                    <button type="button" class="btn btn-sm btn-danger"
                            style="margin-left: 1em; margin-bottom: 1em; margin-right: 1em"
                            (click)="cancel()">
                        Cancel
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="noProblemContainer" *ngIf="problemFindings.length == 0 ">
        <a style="font-weight: bold">No problems are detected in the model.</a>
    </div>
</div>

<div id="SolutionSelectionView" *ngIf="!loading && possibleSolutions">
    <div class="solutionsContainer" *ngIf="possibleSolutions.length > 0">
        <mat-list>
            <h3 mat-subheader>Possible Solutions</h3>
            <mat-divider></mat-divider>
            <mat-list-item *ngFor="let solution of possibleSolutions; last as last" (click)="selectSolution(solution)"
                           [class.selected]="solution === selectedSolution">
                <h4 style="font-weight: bolder" mat-line>{{solution.name}}</h4>
                <p mat-line>{{solution.description}}</p>
                <mat-divider [inset]="true" *ngIf="!last"></mat-divider>
            </mat-list-item>
        </mat-list>
        <div class="row">
            <div class="col-lg-12">
                <div class="btn-group" style="width: 100%; margin-top: 1em;">
                    <button type="button" class="btn btn-sm btn-primary"
                            style="margin-top: 1em; margin-left: 1em; margin-bottom: 1em; margin-right: 1em"
                            [disabled]="!selectedSolution" (click)="applySolution()">Apply
                    </button>
                    <button type="button" class="btn btn-sm btn-danger"
                            style="margin-top: 1em; margin-left: 1em; margin-bottom: 1em; margin-right: 1em"
                            (click)="cancel()">
                        Cancel
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="noSolutionContainer" *ngIf="possibleSolutions.length == 0 ">
        <a style="font-weight: bold">No matching solution available.</a>
    </div>
</div>
<div class="AppliedFinished" *ngIf="applied">
    <a style="font-weight: bold">Solution successfully applied.</a>
</div>
